<html>
<head>
    <!--
        On Safari, this test verifies that a composited layer's bounds include filter outsets after
        a software-painted blur animation. On Safari, the filter animation is painted in software
        because drop-shadow appears before another filter in the chain.

        If the test passes, you should see a blurred-out green element. Its composited layer should
        be large enough so that the blur does not appear clipped.
    -->
    <style>
        #composited-layer {
            background-color: green;
            transform: translateZ(0);
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
        }
        .initial-drop-shadow {
            /* Safari paints filters in software when drop-shadow appears before another filter in the chain. */
            -webkit-filter: drop-shadow(10px 10px 0px black) blur(0);
        }
        .final-drop-shadow {
            -webkit-filter: drop-shadow(10px 10px 0px black) blur(25px);
            -webkit-animation-name: blur-animation;
            -webkit-animation-duration: 0.1s;
        }
        @-webkit-keyframes blur-animation {
            from {
                -webkit-filter: drop-shadow(10px 10px 0px black) blur(0);
            }
            to {
                -webkit-filter: drop-shadow(10px 10px 0px black) blur(25px);
            }
        }
    </style>
    <script>
        if (window.testRunner)
            testRunner.waitUntilDone();

        function startTest()
        {
            var targetElement = document.getElementById("composited-layer");
            if (window.testRunner)
                targetElement.addEventListener("webkitAnimationEnd", finishTest);
            targetElement.className = "final-drop-shadow";
        }

        function finishTest()
        {
            var layerTreeText = window.internals.layerTreeAsText(document);
            document.getElementById("console").appendChild(document.createTextNode(layerTreeText));
            testRunner.dumpAsText();
            testRunner.notifyDone();
        }
    </script>
</head>
<body onload="startTest()">
    <div id="composited-layer" class="initial-drop-shadow"></div>
    <pre id="console"></pre>
</body>
</html>
